const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HtmlInlineChunkPlugin = require('html-webpack-inline-chunk-plugin')
const webpack = require('webpack');
const PurifyCss = require('purifycss-webpack')
const cleanWebpackPlugin = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VueClientPlugin = require('vue-server-renderer/client-plugin')

const globAll = require('glob-all')
const path = require('path');
module.exports = {
    entry: path.join(__dirname, '/src/client_entry.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'http://127.0.0.1:9001/',
        // 资源加载公共路径
        // publicPath: '',
        // js/ 意思是输出到js文件夹
        filename: 'js/[name].bundle-[hash:8].js'
    },
    // webpack-dev-server是webpack官方的dev-server,不需要require,直接在这里配就可以
    // invalid "instanceof" keyword value Promise
    // 这个报错是webpack-dev-server和webpack版本不兼容, webpack-dev-server@2.x就可以了
    // devServer: {
    //     port: '9001',
    //     // 如果是false, 编译状态就显示在页面最上面(一个横条),如果是true,就在控制台里, 默认是true
    //     // inline: false,
    //     // 没有匹配到路由时, 它是webpack引用得第三方得包connect-history-api-fallback
    //     // historyApiFallback: true
    //     historyApiFallback: {
    //         // 添加重定向规则
    //         rewrites: [
    //             { from: /\/abc/g, to: '/a.html'}
    //         ]
    //     },
    //     // Proxy 也是内部集成了第三方包http-proxy-middleware
    //     proxy: {
    //         '/': {
    //             target: 'https://shadow.elemecdn.com',
    //             // 未设置之前报500,加上这个参数就可以请求一些未知host的站点,它可以帮助我们找到真实想要请求的地址
    //             changeOrigin: true,
    //             logLevel: 'debug',
    //             pathRewrite: {
    //                 '^/crayfish': '/api/crayfish'
    //             },
    //             headers: {
    //                 Cookie: 'xxx'
    //             }
    //         }
    //     },
    //     hot: true,
    //     hotOnly: true
    // },
    resolve: {
        alias: {
            // 这个$添加的意义是 你确定你只是把jquery这个关键字解析到某个目录的文件下，而不是某个目录，它是确切的匹配
            // jquery$: path.resolve(__dirname, 'src/libs/jquery.min.js')
            'vue$': 'vue/dist/vue.common.js'
        }
    },
    devServer: {
        host: '0.0.0.0',
        port: '9001',
        overlay: {
            errors: true
        },
        headers: { 'Access-Control-Allow-Origin': '*' },
        proxy: {
            '/api': 'http://127.0.0.1:3333',
            '/user': 'http://127.0.0.1:3333'
        },
        hot: true,
        // 设置无论如何也不会通过全局的刷新来更新
        hotOnly: true
    },
    devtool: 'source-map',
    module: {
        rules: [
            // {
            //     test: /\.css$/,
            //     use: ExtractTextWebpackPlugin.extract({
            //         fallback: {
            //             loader: 'style-loader'
            //         },
            //         use: [
            //             // {
            //             //     loader: 'style-loader',
            //             // },
            //             {
            //                 loader: 'css-loader'
            //             },
            //             // 设置支持到哪些浏览器
            //             // package.json里面可以写browserslist
            //             // 也可以创建.browserslistrc文件
            //             {
            //                 loader: 'postcss-loader',
            //                 options: {
            //                     // 表明接下来的插件是给postcss用的
            //                     ident: 'postcss',
            //                     plugins: [
            //                         // postcss-preset-env includes autoprefixer, 
            //                         // so adding it separately is not necessary if you already use the preset
            //                         require('postcss-sprites')({
            //                             // spritePath: 'dist/images/sprites',
            //                             // retina: true
            //                         }),
            //                         require('autoprefixer')()
            //                     ]
            //                 }
            //             }
            //         ]
            //     })
            // },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 设置支持到哪些浏览器
                    // package.json里面可以写browserslist
                    // 也可以创建.browserslistrc文件
                    {
                        loader: 'postcss-loader',
                        options: {
                            // 表明接下来的插件是给postcss用的
                            ident: 'postcss',
                            plugins: [
                                // postcss-preset-env includes autoprefixer, 
                                // so adding it separately is not necessary if you already use the preset
                                require('postcss-sprites')({
                                    // spritePath: 'dist/images/sprites',
                                    // retina: true
                                }),
                                require('autoprefixer')()
                            ]
                        }
                    }
                ]
            },
            // {
            //     test: /\.css$/,
            //     use: ExtractTextWebpackPlugin.extract({
            //         fallback: {
            //             loader: 'style-loader'
            //         },
            //         use: [
            //             // {
            //             //     loader: 'style-loader',
            //             // },
            //             {
            //                 loader: 'css-loader'
            //             },
            //             // 设置支持到哪些浏览器
            //             // package.json里面可以写browserslist
            //             // 也可以创建.browserslistrc文件
            //             {
            //                 loader: 'postcss-loader',
            //                 options: {
            //                     // 表明接下来的插件是给postcss用的
            //                     ident: 'postcss',
            //                     plugins: [
            //                         // postcss-preset-env includes autoprefixer, 
            //                         // so adding it separately is not necessary if you already use the preset
            //                         // require('postcss-sprites')({
            //                         //     spritePath: 'dist/images/sprites',
            //                         //     // retina: true
            //                         // }),
            //                         require('autoprefixer')()
            //                     ]
            //                 }
            //             }
            //         ]
            //     })
            // },
            {
                test: /\.js$/,
                exclude: __dirname + 'node_modules',
                include: __dirname + 'src',
                loader: 'babel-loader'
            },
            // {
            //     test: /\.(png|jpg|jepg|gif)$/,
            //     use: [
            //         {
            //             loader: 'file-loader'
            //         }
            //     ]
            // },
            {
                test: /\.(png|jpg|jepg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name].min.[ext]',
                            outputPath: 'img/',
                            useRelativePath: true,
                            limit: 5000
                        }
                    },
                    // 压缩图片
                    {
                        loader: 'img-loader',
                        // options: {
                        //     pngquant: {
                        //         quality: 80
                        //     }
                        // }
                    }
                ]
            },
            {
                test: /\.(eot|woff2|woff|ttf|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name]-[hash:8].[ext]',
                            outputPath: 'dist/',
                            useRelativePath: true,
                            limit: 5000
                        }
                    }
                ]
            },
            // {
            //     test: path.resolve(__dirname, 'src/app.js'),
            //     use: [
            //         {
            //             loader: 'imports-loader',
            //             options: {
            //                 $: 'jquery'
            //             }
            //         }
            //     ]
            // }
            {
                test: /\.html$/,
                use: { 
                    loader: 'html-loader',
                    options: {
                        attrs: ['img:src', 'img:data-src']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        // server render needed
        new VueClientPlugin(),
        // new ExtractTextWebpackPlugin({
        //     filename: 'css/[name]-[hash:5].min.css',
        //     // 控制有哪些css在一开始的时候打包到页面中
        //     // 动态加载的样式放到各个模块中
        //     // When using CommonsChunkPlugin and there are extracted chunks 
        //     // (from ExtractTextPlugin.extract) in the commons chunk, 
        //     // allChunks must be set to true
        //     allChunks: true
        // }),
        // 一定要放在ExtractTextWebpackPlugin后面
        // This plugin uses PurifyCSS to remove unused selectors from your CSS. 
        // You should use it with the extract-text-webpack-plugin.
        // new PurifyCss({
        //     paths: globAll.sync([
        //         path.resolve(__dirname, './*.html'),
        //         path.join(__dirname, './src/*.js')
        //     ])
        // }),
        new HTMLWebpackPlugin({
            // 这个默认就是html
            filename: 'index.html',
            template: './index.html',
            inject: true,
            // 多页面再用
            // chunks: []
            minify: {
                // collapseWhitespace: true
            }
        }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: 'manifest'
        // }),
        // new HtmlInlineChunkPlugin({
        //     name: ['manifest']
        // }),
        // 这个也可以用imports-loader代替
        // new webpack.ProvidePlugin({
        //     _: 'lodash',
        //     // 这里的名称(jquery) 要和上面resolve里的一致
        //     $: 'jquery'
        // }),
        // tree-shaking
        // new webpack.optimize.UglifyJsPlugin(),
        // new cleanWebpackPlugin(['dist']),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
}